<template>
    <div class="cart">
      <Header title="购物车" :edit="true"/>
      <CartDetail v-if="isShow" :changeShow="changeShow" />
      <Empty v-else/>
      <Footer />

    </div>
</template>

<script>
import Footer from '../../components/Footer.vue';
import Empty from '../../components/Empty.vue';//空购物车页面
import Header from '../../components/Header.vue';
import CartDetail from './components/CartDetail.vue';
import { ref,onMounted } from 'vue';
import {useStore} from 'vuex';

export default {
  components: { Footer, Empty,Header, CartDetail },
  setup(){
    const isShow = ref(true)
    const store = useStore()

    //如果购物车为空；也就是购物车的数组长度=0：
    const init = () => { 
      if(store.state.cartList.length === 0){
        isShow.value = false
      }
    };

    //changeShow :
    const changeShow = ()=>{
      isShow.value = false
    }

    onMounted(() => {
      init();
    });

    return {
      isShow,changeShow
    }
  }
}
</script>

<style lang="less" scoped>
.cart {
  display: flex;
  // 纵向轴
  flex-flow: column;
  height: 100%;

  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>